<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel='stylesheet' href='css/pubu.css' media='screen' />
		 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
		 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/pcindex.css" />
		<script src="js/blocksit.min.js"></script>
		<script>
		$(document).ready(function() {
			//vendor script
			$('.header')
			.css({ 'top':-50 })
			.delay(1000)
			.animate({'top': 0}, 800);
			
			$('#footer')
			.css({ 'bottom':-15 })
			.delay(1000)
			.animate({'bottom': 0}, 800);
			
			//blocksit define
			$(window).load( function() {
				$('#container').BlocksIt({
					numOfCol: 5,
					offsetX: 8,
					offsetY: 8
				});
			});
			
			//window resize
			var currentWidth = 1100;
			$(window).resize(function() {
				var winWidth = $(window).width();
				var conWidth;
				debugger;
				if(winWidth < 660) {
					conWidth = 440;
					col = 2
				} else if(winWidth < 880) {
					conWidth = 660;
					col = 3
				} else if(winWidth < 1100) {
					conWidth = 880;
					col = 4;
				} else {
					conWidth = 1100;
					col = 5;
				}
				
				if(conWidth != currentWidth) {
					currentWidth = conWidth;
					$('#container').width(conWidth);
					$('#container').BlocksIt({
						numOfCol: col,
						offsetX: 8,
						offsetY: 8
					});
				}
			});
		});
		</script>
	</head>
	<body>
<div class="dialog-content">
	<div class="row">
		<iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="header.html" width="100%"  height="43px">
  </iframe>
	</div>
	<div class="row topshow"></div>
	<div class="row">
		<section id="wrapper">
			<div id="container">
				<div class="grid">
					<div class="imgholder">
						<img src="image/1000.jpg" />
					</div>
					<strong>Sunset Lake</strong>
					<p>A peaceful sunset view...</p>
					<div class="meta">by j osborn</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="image/img15.jpg" />
					</div>
					<strong>Bridge to Heaven</strong>
					<p>Where is the bridge lead to?</p>
					<div class="meta">by SigitEko</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="image/img16.jpg" />
					</div>
					<strong>Autumn</strong>
					<p>The fall of the tree...</p>
					<div class="meta">by Lars van de Goor</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="image/1000.jpg" />
					</div>
					<strong>Winter Whisper</strong>
					<p>Winter feel...</p>
					<div class="meta">by Andrea Andrade</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="image/img16.jpg" />
					</div>
					<strong>Light</strong>
					<p>The only shinning light...</p>
					<div class="meta">by Lars van de Goor</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="image/img16.jpg" />
					</div>
					<strong>Rooster's Ranch</strong>
					<p>Rooster's ranch landscape...</p>
					<div class="meta">by Andrea Andrade</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="image/img15.jpg" />
					</div>
					<strong>Autumn Light</strong>
					<p>Sun shinning into forest...</p>
					<div class="meta">by Lars van de Goor</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="image/img16.jpg" />
					</div>
					<strong>Yellow cloudy</strong>
					<p>It is yellow cloudy...</p>
					<div class="meta">by Zsolt Zsigmond</div>
				</div>
				<div class="grid">
					<div class="imgholder">
						<img src="image/1000.jpg" />
					</div>
					<strong>Herringfleet Mill</strong>
					<p>Just a herringfleet mill...</p>
					<div class="meta">by Ian Flindt</div>
				</div>

			</div>
		</section>
	</div>
</div>
	</body>
</html>
